<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>事件的基本使用</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>

        <!-- 事件的基本使用
            1.使用v-on:xxx或@xxx绑定事件，xxx是事件名
            2.事件的回调函数需要配置在methods对象中，最终会在vm实例上
            3.methods中配置的函数，不要用箭头函数！否则this就不是vm实例了
            4.methods中配置的函数，都是被Vue管理的函数，this指向的是vm或组件实例对象
            5.@click="demo" 和 @click="demo($event)" 效果一样，但后者可以传参 -->
       
        <div id ="root">
            <h1>欢迎来到{{name}}学习</h1>
            <button v-on:click="showInfo">点我</button>
            <button @click="showInfo2">点我2</button>
            <button @click="showInfo3(66,$event)">点我3</button>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false
            const vm = new Vue({
                el:'#root',
                data:{
                    name:'课堂'
                },
                methods:{
                    showInfo(event){
                        console.log(event.target.innerText)
                        console.log(this) //此处的this是vm
                        //alert("你好！")
                    },
                    showInfo2:(event)=>{
                        console.log(event.target.innerText)
                        console.log(this) //此处的this是windows全局的
                        //alert("你好！")
                    },
                    //在showInfo3的点击方法楚如果不加$enent，就会丢失-无法使用
                    showInfo3(number,a){
                        console.log(a.target.innerText)
                        console.log(this) //此处的this是vm
                        //alert("你好！")
                    }
                }
            })
           
        </script>

        
    </body>
</html>